<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Мой валидатор формы.</title>

        <link rel="stylesheet" type="text/css" href="/scripts/dijit/themes/tundra/tundra.css" />
        <link href="/scripts/css/myvalidate.css" rel="stylesheet" type="text/css" />
        
        <script type="text/javascript">
        var djConfig = {
	        isDebug:true,
            parseOnLoad:true};

        </script>
        <script  type="text/javascript" src="/scripts/dojo/dojo.js"></script>
        <script type="text/javascript">
            dojo.require("dijit.form.Form");
            dojo.require("dijit.form.TextBox");
            dojo.require("dijit.form.SimpleTextarea");
            dojo.require("dijit.form.Button");
            dojo.require("dijit.form.CheckBox");
            dojo.require("dijit.form.Select");
        </script>


        <script type="text/javascript">
            dojo.addOnLoad(function() {
                //Attach the plugin
                dojo.require("dojo.app.myvalidatorDijit.myvalidate");

                //Init global options
                var globalOptions = {bindedElement :  dijit.byId("forma"),
                                     triggeredEvents: ["onSubmit"],
                                     processors : [{method:'notEmpty'}],
                                     errorFunction   : "list"};

                //Validators that will be used by plugin
                var validatorStack = ['notEmpty', 'minLength', 'maxLength', 
                                      'regExp', 'rangeLength', 'required',
                                      'equal', 'rangeValue', 'email'];

                //Functions that show errors of validation
                var errorMessageShowFunctionStack = ['list', 'popup'];

                //Attach the validator class and init options
                //You can specifies the locale used by plugin (default "en")
                var validator = new dojo.app.myvalidatorDijit.myvalidate(
                    globalOptions,
                    validatorStack,
                    errorMessageShowFunctionStack, 
                    "ru"
                );


                //And now specifies the form fields and its validation options
                var options1 = {bindedElement   : dijit.byId("two"),
                                triggeredEvents : ['onKeyUp'],
                                processors : [{method          : 'minLength',
                                               validationValue : 3,
                                               messages        : {'en':'Error with %value%. 3 characters are required!',
                                                                  'ru':'Ошибка в %value%. Необходимо минимум 3 символа!'}},
                                               {method         : 'notEmpty'},
                                               {method         : 'regExp',
                                                validationValue: /^[0-9]+$/}
                                             ]
                               };
                //triggeredEvents and bindedElement from globalOptions
                var options2 = {processors : [{method         : 'maxLength',
                                               validationValue: 6}
                                             ]
                               };

                //errorFunction - popup (will be displayed popup window)
                var options3 = {processors : [{method : 'maxLength',
                                               validationValue: 1,
                                               messages : {'ru':'Happy birthday to you'}}],
                                errorFunction : "popup"
                               };

                var options4 = {errorFunction : "popup"};

                var optionsRange = ({processors : [{method : 'rangeLength',
                                                    validationValue : {'min':2,
                                                                       'max':4},
                                                    messages : {'en':'The number of the characters must be beetwen 2..4',
                                                                'ru':'Кол-во символов должно быть в пределах 2..4'}
                                                   }]
                                     });

                var optionsRadio = ({processors : [{method : 'required'}]});

                var optionsSelector = ({bindedElement   : dijit.byId("selector"),
                                        triggeredEvents : ['onChange'],
                                        processors : [{method : 'equal',
                                                       validationValue : 'yes'}]});

                var optionsRangeValue = ({bindedElement   : dijit.byId("rangeValue"),
                                          triggeredEvents : ['onBlur'],
                                          processors : [{method : 'rangeValue',
                                                         validationValue : {'min':1990,
                                                                            'max':2000},
                                                         messages : {'en':'Enter value in the range 1990..2000',
                                                                     'ru':'Введите число в диапазоне 1990..2000'}
                                                        }]
                                          });

                 var optionsEmail = ({processors : [{method : 'email',
                                                     messages : {'en':'This email is not valid',
                                                                 'ru':'Введенный email не валиден'}
                                                   }]
                                      });


                //What fields we validate
                //And now these options will be applied to form elements
               validator.validate([
                   {element : dijit.byId("one"), options : options4},
                    {element : dijit.byId("two"),  options : options1},
                    {element : dijit.byId("two"),  options : options2},
                    {element : dijit.byId("three"), options : options3},
                    {element : dijit.byId("test")},
                    {element : dijit.byId("range"), options : optionsRange},
                    {element : dijit.byId("radiob"), options : optionsRadio},
                    {element : dijit.byId("selector"), options : optionsSelector},
                    {element : dijit.byId("rangeValue"), options : optionsRangeValue},
                    {element : dijit.byId("email"), options : optionsEmail}
                ]);
            });
        </script>
        

    </head>
    <body class="tundra">
        <p><b>Валидатор форм. Плагин Dojo для dojo виджетов.</b></p>
    
        <div dojoType="dijit.form.Form" id="forma" jsId="myFormTwo" encType="multipart/form-data"
        action="" method="post">

        Валидатор "notEmpty". Событие - submit формы.<br />
        <input id="one" type="text" name="field" value="" dojoType="dijit.form.TextBox" /><br /><br />

        Валидаторы "minLength, notEmpty, maxLength, regExp". Событие - onkeyup.
        А также валидатор maxLength для события - submit формы.<br />
        <input id="two" type="text" name="field2" value="" dojoType="dijit.form.TextBox" /><br /><br />

        Валидатор "maxLength". Событие - submit формы. Сообщение об ошибке в виде pop-up<br />
        <input id="three" type="text" name="field3" value="" dojoType="dijit.form.TextBox" /><br /><br />

        Валидатор "notEmpty". Событие - submit формы. Используются глобальные настройки плагина<br />
        <textarea id="test" cols="10" name="fieldTest" rows="5" dojoType="dijit.form.SimpleTextarea"></textarea><br /><br />

        Валидатор "rangeLength". Событие - submit формы.<br />
        <input id="range" type="text" name="range" dojoType="dijit.form.TextBox" /><br /><br />

        Валидатор "required". Событие - submit формы.<br />
        Поставьте галочку<br />
        <input type="checkbox" id="radiob" name="radiob" dojoType="dijit.form.CheckBox" /><br /><br />

        Валидатор "equal". Событие - onchange селекта.<br />
        Вы часто опаздывает на работу?<br />
        <select id="selector" name="myselector" dojoType="dijit.form.Select">
            <option value="yes" />Да
            <option value="no" />Нет
            <option value="dontno" />Не знаю
        </select><br /><br />

        Валидатор "rangeValue". Событие - onBlur<br />
        <input id="rangeValue" type="text" name="rangeValue" dojoType="dijit.form.TextBox" /><br /><br />

        Валидатор "email". Событие - submit<br />
        <input id="email" type="text" name="email" dojoType="dijit.form.TextBox" /><br /><br />

        <button dojoType="dijit.form.Button" type="submit">Submit</button>


        </div>


        <a href="" onclick="window.history.back();return false;">Назад</a>
    </body>

</html>
